<!DOCTYPE html>
<html>
<head>
	<title>注册页面</title>
	<link href="static/1/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="static/1/js/jquery.min.js"></script>
	<!-- Custom Theme files -->
	<!--menu-->
	<script src="static/1/js/scripts.js"></script>
	<link href="static/1/css/styles.css" rel="stylesheet">
	<!--//menu-->
	<!--theme-style-->
	<link href="static/1/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!--//theme-style-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Real Home  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

	<!--dropzone-->
	<link rel="stylesheet" href="static/dropzone/basic.min.css"/>
	<link rel="stylesheet" href="static/dropzone/dropzone.min.css"/>
	<script src="static/dropzone/dropzone.min.js"></script>

	<script type="text/javascript" src="static/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="static/jquery/messages_zh.js"></script>
</head>

<style type="text/css">
	#form-info{
		position: relative;
		right: 50px;
		float: right;
	}
	#dropzone{
		position: relative;
		left: 10px;
		float: left;
	}

</style>

<style>
	.register {
		margin: auto;
		width: 300px;
	}

	/*错误提示信息*/
	label.error {
		color: red;
		font-size: xx-small;
	}
</style>
<body>
<!--header-->
<div class="navigation">
	<div class="container-fluid">
		<nav class="pull">
			<ul>
				<li><a  href="index.html">首页</a></li>
				<li><a href="rooms-list.html">我要预定</a></li>
				<li><a  href="about.html">关于我们</a></li>
				<!--<li><a  href="blog.html">Blog</a></li>-->
				<li><a  href="terms.html">条款</a></li>
				<!--<li><a  href="privacy.html">Privacy</a></li>
                <li><a  href="contact.html">Contact</a></li>-->
			</ul>
		</nav>
	</div>
</div>

<div class="header">
	<div class="container">
		<!--logo-->
		<div class="logo">
			<h1><a href="index.html">REAL HOME</a></h1>
		</div>
		<!--//logo-->
		<div class="top-nav">
			<ul class="right-icons">
				<li><span ><i class="glyphicon glyphicon-phone"> </i>+1384 757 546</span></li>
				<li><a  href="login.html"><i class="glyphicon glyphicon-user"> </i>Login</a></li>
				<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a></li>

			</ul>
			<div class="nav-icon">
				<div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
					<a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i> </a>
				</div>
				<!---
				<a href="#" class="right_bt" id="activator"><i class="glyphicon glyphicon-menu-hamburger"></i>  </a>
			--->
			</div>
			<div class="clearfix"> </div>
			<!---pop-up-box---->

			<link href="static/1/css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="static/1/js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<!----- tabs-box ---->
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item " aria-controls="tab_item-0" role="tab"><span>All Homes</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>For Sale</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>For Rent</span></li>
							<div class="clearfix"></div>
						</ul>
						<div class="resp-tabs-container">
							<h2 class="resp-accordion resp-tab-active" role="tab" aria-controls="tab_item-0"><span class="resp-arrow"></span>All Homes</h2><div class="tab-1 resp-tab-content resp-tab-content-active" aria-labelledby="tab_item-0" style="display:block">
							<div class="facts">
								<div class="login">
									<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">
									<input type="submit" value="">
								</div>
							</div>
						</div>
							<h2 class="resp-accordion" role="tab" aria-controls="tab_item-1"><span class="resp-arrow"></span>For Sale</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
							<div class="facts">
								<div class="login">
									<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">
									<input type="submit" value="">
								</div>
							</div>
						</div>
							<h2 class="resp-accordion" role="tab" aria-controls="tab_item-2"><span class="resp-arrow"></span>For Rent</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
							<div class="facts">
								<div class="login">
									<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">
									<input type="submit" value="">
								</div>
							</div>
						</div>
						</div>
					</div>
					<script src="static/1/js/easyResponsiveTabs.js" type="text/javascript"></script>
					<script type="text/javascript">
						$(document).ready(function () {
							$('#horizontalTab').easyResponsiveTabs({
								type: 'default', //Types: default, vertical, accordion
								width: 'auto', //auto or any width like 600px
								fit: true   // 100% fit in a container
							});
						});
					</script>
				</div>
			</div>
			<script>
				$(document).ready(function() {
					$('.popup-with-zoom-anim').magnificPopup({
						type: 'inline',
						fixedContentPos: false,
						fixedBgPos: true,
						overflowY: 'auto',
						closeBtnInside: true,
						preloader: false,
						midClick: true,
						removalDelay: 300,
						mainClass: 'my-mfp-zoom-in'
					});

				});
			</script>


		</div>
		<div class="clearfix"> </div>
	</div>
</div>
<!--//-->
<div class=" banner-buying">
	<div class=" container">
		<h3><span></span></h3>
		<!---->
		<div class="menu-right">
			<ul class="menu">
				<li class="item1"><a href="#"> Menu<i class="glyphicon glyphicon-menu-down"> </i> </a>
					<ul class="cute">
						<li class="subitem1"><a href="buy.html">Buy </a></li>
						<li class="subitem2"><a href="buy.html">Rent </a></li>
						<li class="subitem3"><a href="buy.html">Hostels </a></li>
						<li class="subitem1"><a href="buy.html">Resale </a></li>
						<li class="subitem2"><a href="loan.html">Home Loan</a></li>
						<li class="subitem3"><a href="buy.html">Apartment </a></li>
						<li class="subitem3"><a href="dealers.html">Dealers</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="clearfix"> </div>
		<!--initiate accordion-->
		<script type="text/javascript">
			$(function() {
				var menu_ul = $('.menu > li > ul'),
						menu_a  = $('.menu > li > a');
				menu_ul.hide();
				menu_a.click(function(e) {
					e.preventDefault();
					if(!$(this).hasClass('active')) {
						menu_a.removeClass('active');
						menu_ul.filter(':visible').slideUp('normal');
						$(this).addClass('active').next().stop(true,true).slideDown('normal');
					} else {
						$(this).removeClass('active');
						$(this).next().stop(true,true).slideUp('normal');
					}
				});

			});
		</script>




	</div>
</div>
<!--//header-->
<!--contact-->
<div class="login-right">
	<div class="container">
		<h3>注册</h3>
		<div class="login-top">
			<!--<ul class="login-icons">
                <li><a href="#" ><i class="facebook"> </i><span>Facebook</span></a></li>
                <li><a href="#" class="twit"><i class="twitter"></i><span>Twitter</span></a></li>
                <li><a href="#" class="go"><i class="google"></i><span>Google +</span></a></li>
                <li><a href="#" class="in"><i class="linkedin"></i><span>Linkedin</span></a></li>
                <div class="clearfix"> </div>
            </ul>-->
			<div>
				<div id="dropzone" class="dropzone" style="width: 170px;height: 170px;padding: 1px "  ></div>
				<input type="hidden" id="pic" >
				<script>
					Dropzone.options.dropzone = {
						url: "upload", // 文件提交地址,controller
						method: "post",  // 也可用put
						paramName: "dropzFile", // 默认为file
						maxFiles: 1,// 一次性上传的文件数量上限
						maxFilesize: 10, // 文件大小，单位：MB
						acceptedFiles: ".jpg,.gif,.png,.jpeg,.txt,.doc,.docx", // 上传的类型
						addRemoveLinks: true,
						parallelUploads: 1,// 一次上传的文件数量
						//previewsContainer:"#preview", // 上传图片的预览窗口
						dictDefaultMessage: '上传头像',
						dictMaxFilesExceeded: "您最多只能上传1个文件！",
						dictResponseError: '文件上传失败!',
						dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg,.txt,.doc,.docx。",
						dictFallbackMessage: "浏览器不受支持",
						dictFileTooBig: "文件过大上传文件最大支持.",
						dictRemoveLinks: "删除",
						dictCancelUpload: "取消",
						init: function () {
							this.on("addedfile", function (file) {
								// 上传文件时触发的事件
							});
							this.on("success", function (file, data) {
								// 上传成功触发的事件
								console.log(file);
								console.log(data);
								$("#picName").val("static/upload/"+data.fileName);
								$("#pic").val(data.fileName)
							});
							this.on("error", function (file, data) {
								// 上传失败触发的事件
							});
							this.on("removedfile", function (file) {
								// 删除文件时触发的方法
								console.log(file);
							});
						}

					}


				</script>
				<div class="form-info" id="from-info" style="right: 1px">
					<form id="RegisterForm">
						<p id="n"></p>
						<input type="hidden"   placeholder="用户名" name="username" required="" id="username" >
						<input type="text"   placeholder="手机号码" name="phone" required="" id="phone" >
						<input type="password"  placeholder="密码 " name="password" required="" id="password">
						<input type="password"  placeholder="确认密码 " name="repassword" required="" id="repassword">
						<input type="text"   placeholder="邮箱地址" name="email" required="" id="email">
						<input type="text"   placeholder="验证码" name="code" required="" id="code">
						<input type="button" value="获取验证码" id="getCode" >

						<label class="hvr-sweep-to-right">
							<input type="button" value="注册" id="regBtn"  >
						</label>
					</form>
					<p>已经有账号? <a href="login1.html">登录</a></p>
				</div>
			</div>
			<style type="text/css">
				form label.error {
					width: 200px;
					margin-left: 8px;
					color: Red;
				}
			</style>
			<script type="text/javascript">



				$('#phone').blur(function() {

					var phone = $(this).val();
					$("#username").val(phone);
					//alert($("#username").val())
					if (phone != "") {
						$.ajax({
							url: "checkUserName",    //请求的url地址
							contentType: "application/json; charset=utf-8",
							dataType: "json",   //返回格式为json
							async: true,//请求是否异步，默认为异步，这也是ajax重要特性
							data: JSON.stringify({"username": phone}), //使用这个函数可以转化为json格式   //参数值
							type: "POST",   //请求方式
							/*  beforeSend:function(){
                                    //请求前的处理
                                }, */
							success: function (data) {
								//alert(data)
								/*  因为服务器端返回的是json对象所以可以直接用对象名。属性名 */
								/* JSON.stringify用于把json对象解析成string
                                JSON.parse()用于把json字符串解析成json对象 */
								if (data) {
									$('#n').css("color", "green");
									$('#n').html("该用户名可以注册");
								} else {
									$('#n').css("color", "red");
									$('#n').html("该用户名已注册");
									$('#regBtn').attr("disabled", "disabled");
								}
							},
						});
					}
				})

				//手机号码验证
				jQuery.validator
						.addMethod(
								"isMobile",
								function (value, element) {
									var length = value.length;
									var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
									return this.optional(element)
											|| (length == 11 && mobile.test(value));
								}, "请正确填写您的手机号码")

				$(function () {


					$("#getCode").click(function () {
						var username = $("#phone").val();
						alert(username)
						$.ajax({
							type: "post",
							url: "/sendMassage",
							contentType: "application/json; charset=utf-8",
							datatype: "json",
							data: JSON.stringify({
								"username": username

							}),
							success: function (data) {
								var jsonResult = data;
								//alert("成功：" + jsonResult);

							},
							error: function (msg) {
								alert("失败：" + msg);
							}
						});
					});

					console.log($("#pic"))
					$("#RegisterForm").validate({
						rules: {

							password: {
								required: true,
								rangelength: [6, 12]
							},
							repassword: {
								required: true,
								rangelength: [6, 12],
								equalTo: "#password"
							},
							email: {
								required: true,
								email: true
							},
							phone: {
								required: true,
								minlength: 11,
								isMobile: true
							},
							sex: {
								required: true,
							}

						},
						messages: {
							username: {
								required: "用户名不能为空",
								checkUsername: "用户名已存在"
							},
							password: {
								required: "密码不能为空",
								rangelength: "至少输入6个字符,但是不超过12个字符"
							},
							repassword: {
								required: "密码不能为空",
								rangelength: "至少输入6个字符,但是不超过12个字符",
								equalTo: "两次密码输入不一致"
							},
							email: {
								required: "邮箱不能为空",
								email: "邮箱格式不正确"
							},
							phone: {
								required: "请输入手机号码",
								minlength: "手机号码长度不能小于 11 ",
								isMoblie: "请正确填写您的手机号码"
							},
							sex: {
								required: "没有第三种选择"
							}
						}

					});
					$("#regBtn").click(function () {
						$.ajax({
							type: "post",
							url: "registerPhone",
							contentType: "application/json; charset=utf-8",
							datatype: "json",
							data: JSON.stringify({
								"photo":$("#pic").val(),
								"username": $("#username").val(),
								"password": $("#password").val(),
								"phone": $("#phone").val(),
								"email": $("#email").val(),
								"code":$("#code").val()

							}),
							success: function (data) {
								//alert(data)
								var jsonResult = data.msg;
								//alert("成功：" + jsonResult);
								if (data){
									location.href = "login1.html"
								} else {
									location.reload();
								}
								
							},
							error: function (msg) {
								alert("失败：" + msg);
							}
						});
					});

				});

			</script>
		</div>
	</div>
</div>
<!--//contact-->
<!--footer-->
<div class="footer">
	<div class="container">
		<div class="footer-top-at">
			<div class="col-md-3 amet-sed">
				<h4>Our Company</h4>
				<ul class="nav-bottom">
					<li><a href="about.html">About Us</a></li>
					<li><a href="blog.html">For Sale By Owner Blog</a></li>
					<li><a href="mobile_app.html">Mobile</a></li>
					<li><a href="terms.html">Terms & Conditions</a></li>
					<li><a href="privacy.html">Privacy Policy</a></li>
					<li><a href="blog.html">Blog</a></li>

				</ul>
			</div>
			<div class="col-md-3 amet-sed ">
				<h4>Work With Us</h4>
				<ul class="nav-bottom">
					<li><a href="single.html">Real Estate Brokers</a></li>
					<li><a href="single.html">Business Development</a></li>
					<li><a href="single.html">Affiliate Programs</a></li>
					<li><a href="contact.html">Sitemap</a></li>
					<li><a href="career.html">Careers</a></li>
					<li><a href="feedback.html">Feedback</a></li>
				</ul>
			</div>
			<div class="col-md-3 amet-sed">
				<h4>Customer Support</h4>
				<p>Mon-Fri, 7AM-7PM </p>
				<p>Sat-Sun, 8AM-5PM </p>
				<p>177-869-6559</p>
				<ul class="nav-bottom">
					<li><a href="#">Live Chat</a></li>
					<li><a href="faqs.html">Frequently Asked Questions</a></li>
					<li><a href="suggestion.html">Make a Suggestion</a></li>
				</ul>
			</div>
			<div class="col-md-3 amet-sed ">
				<h4>Property Services</h4>
				<ul class="nav-bottom">
					<li><a href="single.html">Residential Property</a></li>
					<li><a href="single.html">Commercial Property</a></li>
					<li><a href="login.html">Login</a></li>
					<li><a href="register.html">注册</a></li>
					<li><a href="typo.html">Short Codes</a></li>
				</ul>
				<ul class="social">
					<li><a href="#"><i> </i></a></li>
					<li><a href="#"><i class="gmail"> </i></a></li>
					<li><a href="#"><i class="twitter"> </i></a></li>
					<li><a href="#"><i class="camera"> </i></a></li>
					<li><a href="#"><i class="dribble"> </i></a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="footer-bottom">
		<div class="container">
			<div class="col-md-4 footer-logo">
				<h2><a href="index.html">REAL HOME</a></h2>
			</div>
			<div class="col-md-8 footer-class">
				<p >Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--//footer-->
</body>
</html>